<template>
  <div>
    <vue-gallery-pictures
      :items="photo_list"
      :box-container-class="boxContainerClass"
      :box-init-ratio="boxInitRatio"
      lastLineMode="origin"
      @loaded="loaded"
      @error="error"
    >
      <template>
        <span></span>
      </template>
    </vue-gallery-pictures>
  </div>
</template>

<script>
import VueGalleryPictures from "vue-gallery-pictures";
export default {
  props: {
    photo_list: Array,
    boxInitRatio: {
      default: 150,
    },
  },
  data() {
    return {
      boxContainerClass: "container-class",
    };
  },
  components: {
    VueGalleryPictures,
  },
  methods: {
    loaded() {
      // console.log(item);
    },
    error(item, error) {
      console.log(item, error);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .container-class {
    margin: 4px;
    cursor: pointer;
    overflow: hidden;
    .gallery-pic-box-container {
      transition: all 0.5s;
      &:hover {
        transform: scale(1.05);
      }
    }
  }
}
</style>
